@import "./variables.scss";

@mixin smallBold {
  font-family: $font-family;
  font-style: normal;
  font-weight: 600;
  font-size: calcFontSize(0.75);
  line-height: calcLineHeight(1);
}

@mixin defaultBold {
  font-family: $font-family;
  font-style: normal;
  font-weight: 600;
  font-size: calcFontSize(1);
  line-height: calcLineHeight(1.5);
}

@mixin defaultFont {
  font-family: $font-family;
  font-style: normal;
  font-size: calcFontSize(1);
  line-height: calcLineHeight(1.5);
}

@mixin borderLight {
  border: calcSize(0.25) solid $border-light;
}

@mixin articleXXLargeFont {
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (#{$font-size})));
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
  font-family: $font-family;
  font-weight: var(--sjs-article-font-xx-large-fontWeight, 700);
  font-style: var(--sjs-article-font-xx-large-fontStyle, "normal");
  font-stretch: var(--sjs-article-font-xx-large-fontStretch, "normal");
  letter-spacing: var(--sjs-article-font-xx-large-letterSpacing, 0);
  line-height: var(--sjs-article-font-xx-large-lineHeight, 64px);
  text-indent: var(--sjs-article-font-xx-large-paragraphIndent, 0px);
  text-transform: var(--sjs-article-font-xx-large-textCase, "none");
}

@mixin articleXLargeFont {
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (#{$font-size})));
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
  font-family: $font-family;
  font-weight: var(--sjs-article-font-x-large-fontWeight, 700);
  font-style: var(--sjs-article-font-x-large-fontStyle, "normal");
  font-stretch: var(--sjs-article-font-x-large-fontStretch, "normal");
  letter-spacing: var(--sjs-article-font-x-large-letterSpacing, 0);
  line-height: var(--sjs-article-font-x-large-lineHeight, 56px);
  text-indent: var(--sjs-article-font-x-large-paragraphIndent, 0px);
  text-transform: var(--sjs-article-font-x-large-textCase, "none");
}

@mixin articleLargeFont {
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (#{$font-size})));
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
  font-family: $font-family;
  font-weight: var(--sjs-article-font-large-fontWeight, 700);
  font-style: var(--sjs-article-font-large-fontStyle, "normal");
  font-stretch: var(--sjs-article-font-large-fontStretch, "normal");
  letter-spacing: var(--sjs-article-font-large-letterSpacing, 0);
  line-height: var(--sjs-article-font-large-lineHeight, 40px);
  text-indent: var(--sjs-article-font-large-paragraphIndent, 0px);
  text-transform: var(--sjs-article-font-large-textCase, "none");
}

@mixin articleMediumFont {
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (#{$font-size})));
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
  font-family: $font-family;
  font-weight: var(--sjs-article-font-medium-fontWeight, 700);
  font-style: var(--sjs-article-font-medium-fontStyle, "normal");
  font-stretch: var(--sjs-article-font-medium-fontStretch, "normal");
  letter-spacing: var(--sjs-article-font-medium-letterSpacing, 0);
  line-height: var(--sjs-article-font-medium-lineHeight, 32px);
  text-indent: var(--sjs-article-font-medium-paragraphIndent, 0px);
  text-transform: var(--sjs-article-font-medium-textCase, "none");
}

@mixin articleDefaultFont {
  font-size: var(--sjs-article-font-default-fontSize, #{$font-size});
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
  font-family: $font-family;
  font-weight: var(--sjs-article-font-default-fontWeight, 400);
  font-style: var(--sjs-article-font-default-fontStyle, "normal");
  font-stretch: var(--sjs-article-font-default-fontStretch, "normal");
  letter-spacing: var(--sjs-article-font-default-letterSpacing, 0);
  line-height: var(--sjs-article-font-default-lineHeight, 28px);
  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
  text-transform: var(--sjs-article-font-default-textCase, "none");
}

@mixin articleHtml {
  @include articleDefaultFont;
  color: $font-pagetitle-color;
  h1 {
    @include articleXXLargeFont;
  }

  h2 {
    @include articleXLargeFont;
  }

  h3 {
    @include articleLargeFont;
  }

  h4,
  h5,
  h6 {
    @include articleMediumFont;
  }

  td,
  span,
  div,
  p {
    @include articleDefaultFont;
  }

  a {
    color: $primary;
  }

  button {
    display: flex;
    align-items: center;
    padding: calcSize(1.5) calcSize(4);
    vertical-align: baseline;
    text-align: center;
    background-color: $background;
    border: none;
    border-radius: calcCornerRadius(1);
    cursor: pointer;
    user-select: none;
    outline: solid calcSize(0.25) transparent;

    color: $primary;
    font-weight: 600;
    font-style: normal;
    font-family: $font-family;
    font-size: $font-questiontitle-size;
    line-height: multiply(1.5, $font-questiontitle-size);

    box-shadow: $shadow-small, 0 0 0 0px $primary;
    transition: box-shadow $transition-duration;

    &:hover {
      background-color: $background-dark;
    }

    &:focus {
      box-shadow: $shadow-small-reset, 0 0 0 2px $primary;
    }

    span {
      display: flex;
      align-items: center;
      flex-grow: 1;
      justify-content: center;
      // color: $primary;
      // font-weight: 600;
      // font-style: normal;
      // font-family: $font-family;
      // font-size: $font-questiontitle-size;
      // line-height: multiply(1.5, $font-questiontitle-size);
    }
  }
}